<template>
  <div class="permission-container">
    <div class="app-container">
      <!-- 表格 -->
      <el-card>
        <div style="text-align: right; margin-bottom: 20px">
          <!-- type是1是页面权限，0是按钮权限，pid是0 -->
          <el-button type="primary" size="small" @click="hAdd(1, '0')">添加权限</el-button>
        </div>
        <el-table border :data="list" row-key="id" :header-cell-style="{ background: '#f5f6f8' }">
          <el-table-column prop="name" label="名称" />
          <el-table-column prop="code" label="标识" />
          <el-table-column prop="description" label="描述" />
          <el-table-column prop="" label="操作">
            <template #default="{ row }">
              <el-button v-if="row.type === 1" type="text" @click="hAdd(2, row.id)">添加</el-button>
              <el-button type="text" @click="edit(row.id)">编辑</el-button>
              <el-button type="text" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <!-- 放置一个dialog 用来编辑新增节点 -->
    <el-dialog v-if="showDialog" :visible.sync="showDialog" :title="isEdit ? '编辑弹层' : '添加弹层'" :close-on-press-escape="false" :close-on-click-modal="false">
      <permis-dialog :pid="pid" :type="type" :is-edit="isEdit" :origin-list="originList" :current-id="currentId" @successChange="hSuccess" />
    </el-dialog>
  </div>
</template>

<script>
import { delPermission, getPermissions } from '@/api/permissions'
import { transListToTreeData } from '@/utils'
import permisDialog from './permisDialog.vue'
export default {
  name: 'VueHrTemplateXIndex',
  components: { permisDialog },

  data() {
    return {
      list: [],
      showDialog: false,
      type: '',
      pid: '',
      isEdit: false, // true表示编辑，false表示添加
      currentId: 0,
      originList: [] // 源数据，做code和name校验用的
    }
  },

  created() {
    this.loadgetPermissions()
  },

  methods: {
    // 获取所有权限点
    async loadgetPermissions() {
      const { data } = await getPermissions()
      // console.log(data)
      // 利用循环把拿到的数组对象，拆出只包含id，pid，name，code的数组对象
      this.originList = data.map(({ id, pid, name, code }) => ({ id, pid, name, code }))
      // console.log(this.originList)
      this.list = transListToTreeData(data, 0)
    },
    // 点击添加权限
    hAdd(type, pid) {
      this.isEdit = false
      this.showDialog = true
      this.type = type
      this.pid = pid
      this.currentId = pid
    },
    // 子组件新增权限成功之后，父组件关闭dialog，刷新页面
    hSuccess() {
      this.showDialog = false
      this.loadgetPermissions()
    },
    // 点击删除
    async del(id) {
      try {
        // 提示用户是否删除
        await this.$confirm('您确认要删除吗?', '提示', { type: 'warning' })
        // 发请求
        const res = await delPermission(id)
        // 提示用户
        this.$message.success(res.message)
        // 从新渲染
        this.loadgetPermissions()
      } catch (error) {
        if (error === 'cancel') return
        this.$message.error(error.message)
      }
    },
    // 点击编辑
    async edit(id) {
      this.isEdit = true
      this.showDialog = true
      this.currentId = id
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  & > .el-button {
    margin-bottom: 10px;
  }
}
</style>
